<template>

    <div :id="id" class="video-cont" @click="toFullScreen"></div>


</template>
<script setup lang="ts">
import EZUIKit from 'ezuikit-js'
import http from '@/api/http';
import { env } from "@/utils/env";
import { nextTick, onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
const props = withDefaults(defineProps<{
    appKey?: string;
    appSecret?: string;
    serialNo: string;
    way: number
}>(), {
    appKey: 'dbd0d82bfc674202a0498b2643679200',
    appSecret: '7941cdd3a51b39699a00d63113c5f101'
})
let random = (Math.random() + '').replace('.', '')
const id = ref('luqi' + random)
const clientWidth = ref(0)
const clientHeight = ref(0)
let player: EZUIKit.EZUIKitPlayer | null = null
const isInit = ref(false)
const accessToken = ref('')

const init = async () => {
    if(!clientHeight.value){
        let node = document.querySelector('#' + id.value)
        clientHeight.value = node!.clientHeight
        clientWidth.value = node!.clientWidth
    }
    
    let res = await getAccessToken()
    accessToken.value = res
    

    player = new EZUIKit.EZUIKitPlayer({
        id: id.value, // 视频容器ID
        accessToken: accessToken.value,
        url: `ezopen://open.ys7.com/${props.serialNo}/${props.way}.hd.live`, // SN：E5927****，通道号：1，视频类型：hd
        template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
        plugin: ['fullScreen'], // 加载插件，talk-对讲
        footer: ['fullScreen'],
        width: clientWidth.value,
        height: clientHeight.value,
    })
    // setTimeout(() => {
    //     player.play();
    // }, 3000)

    // window.luqiPlayer = player

}

const toFullScreen = () => {

    player!.fullScreen()
}

const getAccessToken = async () => {
    if (accessToken.value) {
        return accessToken.value
    }
    let res = await http<any>({
        url: `https://open.ys7.com/api/lapp/token/get?appKey=${props.appKey}&appSecret=${props.appSecret}`,
        method: "post",
    })

    return res.data.accessToken
}

onMounted(() => {
    console.log('video player on mounted')
    // init()
})

onActivated(() => {
    console.log('video player onActivated')
    init()

})

onDeactivated(() => {
    console.log('video player onDeactivated')
    if (!player) {
        return
    }
    player.stop()
    // player.destroy();
    player = null
})

onUnmounted(() => {

    if (!player) {
        return
    }
    player.stop()
    // player.destroy();
    player = null
})
</script>
<style scoped>
.video-cont {
    width: 100%;
    height: 12vh;
}

.full-screen {
    position: absolute;
    bottom: 0;
    right: 0;
}
</style>